<template>
  <div class="role-list">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="adduser()">添加</el-button>
      <div style="float: right">
        <el-input
            placeholder="请输入用户名称！"
            size="small"
            style="width: 140px"
            v-model="search.username"
            @clear="findData"
            clearable>
        </el-input>
        <el-button @click="findData" type="success" icon="el-icon-search" size="small"></el-button>
      </div>
      <!-- <div style="float: right">
              <el-row>
                  <el-col :span="22">
                    <el-input placeholder="请输入用户名称" size="small" v-model="search.username" class="input-with-select">
                       <el-select v-model="search.isEffectice" style="width:100px" slot="prepend" placeholder="请选择客户状态">
                           <el-option label="全部" value=""></el-option>
                           <el-option label="正常" value="1"></el-option>
                           <el-option label="已删除" value="0"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="findData"></el-button>
                    </el-input>
                  </el-col>
              </el-row>
          </div> -->

    <el-table
        :data="userData.list"
        border
        ref="table"
        style="width: 100%">
      <el-table-column
          prop="uId"
          label="编号">
          <template slot-scope="scope">
                    <!-- <i class="el-icon-star-off"></i> -->
                    <span style="margin-left: 10px">
                      {{ scope.row.uId }}
                    </span>
          </template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名称">
          <template slot-scope="scope">
                    <!-- <i class="el-icon-star-off"></i> -->
                    <span style="margin-left: 10px">
                      {{ scope.row.username }}
                    </span>
                  </template>
      </el-table-column>
      <el-table-column
          prop="password"
          label="密码">
          <template slot-scope="scope">
                    <!-- <i class="el-icon-star-off"></i> -->
                    <span style="margin-left: 10px">
                      {{ scope.row.password }}
                    </span>
                  </template>
      </el-table-column>
      <el-table-column
          prop="uType"
          label="描述"
          :formatter="typeformat"
          highlight-current-row="true">
      </el-table-column>
      <el-table-column
          label="是否有效"
          prop="isEffectice"
          :formatter="activeformat">
      </el-table-column>
      <el-table-column
          label="操作"
          :render-header="tableAction"
          width="120">
        <template slot-scope="scope">
          <el-button title="编辑" @click="edituser(scope.row)" :disabled="scope.row.isEffectice == 0" type="primary" icon="el-icon-edit" size="small" circle></el-button>
          <el-button title="删除" @click="deleteuser(scope.row)" v-if="scope.row.isEffectice != '0'" type="danger" icon="el-icon-delete" size="small" circle></el-button>
          <el-button title="恢复" @click="deleteuser(scope.row)" v-else icon="el-icon-check" type="primary"  size="small" circle></el-button>
          <!-- <el-button @click="currentEditPermissions = scope.row" type="success" icon="el-icon-setting" size="small" circle></el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;text-align: center">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="userData.total"
          :current-page="this.queryParams.pageNo"
          :page-size="this.queryParams.pageSize"
          @current-change="changePageNo">
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
  // import ToolBar from '@/components/ToolBar.vue';
  // import HelpHint from '@/components/HelpHint.vue';
  import addUser from './addUser.vue'
  import userEdit from './userEdit.vue';
  import { getUserData as userApi } from "../../../api/user";
  import { deleteuser as deleteuser } from "../../../api/user";
  //import { setMap } from '../../utils/dataStorage'; 


  export default {
    
    inject:['reload'],
    data() {
      return {
        search:{
            isEffectice:"",
            username:"",
            uId:""
        },
        queryParams:{
            pageNo:1,
            pageSize:10,
            isEffectice:"",
            username:""
        },
        // roleEditTitle: '角色编辑',
        // currentEditRole: false,
        // dialogFormVisible: false,
        //currentEditPermissions: false,
        userData:{},
       
      }
    },
    created() {
        let param = new URLSearchParams();
        param.append('pageNo', '1');
        param.append('pageSize', '10');
        this.getUserData(param);
    },
    watch:{
     queryParams:{
        handler: function(){
          let param = new URLSearchParams();
          param.append('pageNo',this.queryParams.pageNo);
          console.log("当前页",this.queryParams.pageNo);
          param.append('pageSize',this.queryParams.pageSize);
          param.append('isEffectice',this.queryParams.isEffectice);
          param.append('username',this.queryParams.username);
          this.getUserData(param);
          console.log(param);
        },
        deep: true
      }
    },
    methods: {
        getUserData(param){
          let that = this;
          console.log("param",param);
          userApi(param).then(r => {
              // this.roleData = r;
              that.userData = r;
              console.log(r);
              console.log(r.list);
         }).catch(_ => {
          console.log(_);
        });
      },
      findData(){
        console.log("查询");
        this.queryParams.pageNo = 1;
        this.queryParams.isEffectice = this.search.isEffectice;
        this.queryParams.username = this.search.username;
        // this.merge(this.search,this.queryParams);
      },
    changePageNo(i){
        // alert(i);
        this.queryParams.pageNo=i;
    },
      getInfo(e) {
        console.log(e.currentTarget.innerText);
      },
      activeformat(row, column, cellValue, index){
            return cellValue==0?"失效":"有效";
      },
      typeformat(row, column, cellValue, index){
        if (cellValue == 1) {
          return "超级管理员";
        }else if (cellValue == 2) {
          return "客服";
        }else if (cellValue == 3) {
          return "任务调度";
        }else if (cellValue == 4) {
          return "技术工程师";
        }else if (cellValue == 5) {
          return "库管";
        }else if(cellValue == 6){
          return "运营监督";
        }
            
      },
      tableAction() {
        return this.$createElement('HelpHint', {
          props: {
            content: '编辑用户 / 编辑用户信息'
          }
        }, '操作');
      },
      roleEditChange(data) {
        console.log(data);
        let self = this;

        self.$notify({
          title: self.roleEditTitle + '成功！',
          message: '自己对接Api,并调用你的初始化列表函数！',
          type: 'success'
        });
        self.dialogFormVisible = false;
        // self.$Api.editRole(data,r=>{
        //   self.$message.success(self.roleEditTitle+'成功！');
        //   self.init();
        //   self.dialogFormVisible = false;
        // });
      },
      adduser() {
      let that = this;
                this.$layer.iframe({
                    content: {
                        content: addUser, //传递的组件对象
                        parent: this,//当前的vue对象
                        data: {}//props
                    },
                    area: ['400px', '500px'],
                    title: '添加用户信息',
                    shade: true,
                    shadeClose: false,
                    cancel(){
                        console.log("关闭")
                        let params = new URLSearchParams();
                        params.append('pageNo', '1');
                        params.append('pageSize', '10');
                        that.getUserData(params);
                    }
                });
      },

      edituser(row){
        let that = this;
        this.$layer.iframe({
          content: {
            content: userEdit, //传递的组件对象
            parent: this,//当前的vue对象
            data: {uId:row.uId}//props
          },
          area: ['400px', '500px'],
          title: '修改用户记录',
          shade: true,
          shadeClose: false,
          cancel(){
            console.log("关闭");
            let params = new URLSearchParams();
            params.append('pageNo', '1');
            params.append('pageSize', '10');
            that.getUserData(params);
          }         
        });       
      },

      deleteuser(row){
        if(row.isEffectice === 1){
           let param = new URLSearchParams();
          param.append('uId',row.uId);
          param.append("username", row.username);
          param.append("password", row.password);
          param.append("isEffectice",'0');
          
          deleteuser(param).then(r=>{
            console.log(param);
            setTimeout(() => {
              this.$notify({
                 title:"删除用户成功",
                 type:"success"
              });
            });
          }).catch(_=>{
              console.log("删除用户失败！");
          });
        }else{
          let param = new URLSearchParams();
          param.append('uId',row.uId);
          param.append("username", row.username);
          param.append("password", row.password);
            param.append("isEffectice",'1');
            deleteuser(param).then(r=>{
              console.log(param);
              setTimeout(() => {
                this.$notify({
                  title:"恢复用户成功",
                  type:"success"
                  
                });
              });
            }).catch(_=>{
                console.log("恢复用户失败！");
            });
          }
          let params = new URLSearchParams();
          let that = this;
          params.append('pageNo', that.queryParams.pageNo);
          params.append('pageSize', that.queryParams.pageSize);
          that.getUserData(params);
      },


      UploadRole(data) {
      },
      deleteRole(id) {
        this.$message({
          message: '这里请求api删除或者恢复用户之后刷新分页组件，列表自动更新',
          type: 'success'
        });

      },
      resetting(id) {
        let dom = this.$refs[id].$el;
        dom.style.transform = 'rotate(180deg)';
        setTimeout(() => {
          dom.style.transform = 'rotate(0deg)'
        }, 600)
        this.$message({
          message: '已经成功重置密码',
          type: 'success'
        });

      },


    },
    components: {
      // ToolBar, HelpHint, adduser
    }
  }
</script>
<style lang="scss">

</style>
